<template>
	<view>
		<scroll-view scroll-x="true" class="scroll" scroll-with-animation="true">
			<view>
				<block v-for="(item,index) in tab" :key="index">
					<view class="list-cont" :class="{active:index==num}" @click="clicks(index,item.nav)">
						<view>
							<text class="list-cont-a">{{item.name}}</text>
						</view>
						<view>
							<text class="list-cont-b" :class="{activeb:index==num}">{{item.title}}</text>
						</view>
					</view>
				</block>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {homelist} from '../../../http/config.js'
	export default{
		props:{
			tab:Array
		},
		data(){
			return{
				num:0
			}
		},
		methods:{
			clicks(index,nav){
				this.num = index;
				console.log(index,nav)
				
				//将nav传入仓库
				this.$store.commit('navmit',nav)
				
				let listid = 0;
				homelist(nav,listid).then(res=>{
					// console.log(res)
					//vuex登场
					let listdata = res.data
					this.$store.dispatch('listact',listdata)
				}).catch(err=>{
					console.log(err)
				})
			}
		}
	}
</script>

<style scoped>
	.active{
		background-image: linear-gradient(to right,#ccffff 0%,#ffcc00 100%);
		border-top-right-radius: 50upx;
	}
	.activeb{
		color: #292c33!important;
		font-size: 23upx !important;
	}
	.scroll{
		white-space: nowrap;
		width: 100%;
		position: absolute;
		left: 0; right:0;
		background-color: #ffffff;
		padding: 20upx 0;
	}
	.list-cont-a{
		color: #292c33;
		font-size: 30upx;
		font-weight: bold;
	}
	.list-cont-b{
		color: #9ea0a5;
		font-size: 23upx;
	}
	.list-cont{
		width: 180upx;
		display: inline-block;
		text-align: center;
	}
</style>
